<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" type="text/css" href="css/base.css">
	<link rel="stylesheet" type="text/css" href="./rely/font-awesome.css">
	<link rel="stylesheet" type="text/less" href="./less/main.less">
	<script src="./rely/less.min.js"></script>
</head>
<body>
	<div id="app">
		<div
		class="nav clearFix"
		v-bind:class="{ noneborder: listMove }"
		>
			<div
			class="nav_all"
			@mouseenter="listMove = true"
			@mouseleave="listMove = false"
			><!--  -->
				<span class="fa fa-bars fa-1x"></span>
				全部导航
			</div>

			<div class="nav_list">
				<ul>
					<li>最新活动</li>
					<li>产品</li>
					<li>最新活动</li>
					<li>产品</li>
					<li>最新活动</li>
					<li>产品</li>
					<li>最新活动</li>
					<li>产品</li>
					<li>最新活动</li>
					<li>产品</li>
				</ul>
			</div>
			
		</div>
		<transition name="list">
			<div
			class="list clearFix"
			v-if="listMove"
			@mouseenter="listMove = true"
			@mouseleave="moveout"
			><!--  -->
				<div class="list_l1 f_left">
					<ul>
						<li
						v-for="(item,index) in list"
						v-bind:class="{ active: activeIndex===index }"
						@mouseenter="tagIndex(index);taglist2(index)"
						@mouseleave="tagIndex(false)"
						>{{item.name}}<span class="fa fa-angle-right"></span></li>
					</ul>
				</div>
				<transition name="listt">
					<div
					class="list_l2 f_left"
					v-if="!(list2Move===false)"
					@mouseenter="list2Move = true"
					@mouseleave="list2Move = false"
					><!-- @mouseleave="list2Move = false" -->
						<template v-if="isBg">
					     <div class="bgstyle">
							<div class="bglist" v-for="item2 in list2">
								<h3><a href="">{{ item2.h1 }}</a></h3>
								<ul>
									<li v-for="li in item2.li"><a href="">{{ li }}</a></li>
								</ul>
							</div>
						 </div>
						 </template>
						<template v-if="!isBg">
						<div class="liststyle">
							<ul>
								<li
								v-for="(li,index) in list2"
								v-bind:class="{ active: activeIndex2===index }"
								@mouseenter="tagIndex2(index)"
								@mouseleave="tagIndex2(false)"
								>{{ li }}<span class="fa fa-angle-right"></span></li>
							</ul>
						</div>
						</template>
					</div>
				</transition>	
				<!-- list_l3 -->
				<transition name="list3">
					<div class="list_l3 f_left"
					v-if="!(list3Move===false)"
					@mouseenter="list3Move = true;list2Move = true"
					@mouseleave="list3Move = false"
					>
						<div class="list_l3_left f_left">
							<h3>网络</h3>
							<ul>
								<li>
									<a href="">
										<p>专有网络PVC</p>
										<p>构建逻辑隔离网络，确保资源安全</p>										
									</a>
								</li>
								<li>
									<a href="">
										<p>专有网络PVC</p>
										<p>构建逻辑隔离网络，确保资源安全</p>										
									</a>
								</li>								
								<li>
									<a href="">
										<p>专有网络PVC</p>
										<p>构建逻辑隔离网络，确保资源安全</p>										
									</a>
								</li>
							</ul>
						</div>
						<div class="list_l3_right f_left">
							<p>相关云市场产品和服务</p>
							<ul>
								<li><a href="">专线接入阿里云</a></li>
								<li><a href="">产品和服务</a></li>
								<li><a href="">负载均衡方案</a></li>
								<li><a href="">专线接入阿里云</a></li>
							</ul>
						</div>
					</div>
				</transition>
				<!-- list_l3  ed-->
			</div>
		</transition>	
	</div>

<script src="./rely/axios.js"></script>	
<script src="./rely/vue.js"></script>
<script src="dist/js/jquery-1.12.4.js"></script>
<script src="./js/main.js"></script>

</body>
</html>